<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>历年居民人均支出排行</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<style>
    .g2-legend {
        width: 250px !important;
        height: 100%;
        font-size: 14px !important;
        color: #595959 !important;
    }

    .g2-legend-title {
        color: #5a5a5a;
        font-size: 14px;
    }

    .g2-legend-list {
        margin-top: 10px !important
    }

    .g2-legend-list-item {
        width: 100%;
        height: 30px;
        margin-bottom: 10px
    }

    .legend-item-marker {
        width: 18px;
        height: 18px;
        border-radius: 50px;
        text-align: center;
        font-size: 10px;
        margin-top: 5px;
        color: white;
        float: left;
        opacity: 0.7;
        border-style: solid;
        border-width: 1px;
        border-color: #fff;
    }

    .legend-item-marker:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

    .legend-item-name {
        min-width:60px;
        height: 100%;
        float: left;
        margin-left: 8px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

    .legend-item-name:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

    .legend-item-percent {
        min-width: 30px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #949494;
        text-align: left;
    }

    .legend-item-percent:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }

    .legend-item-value {
        min-width: 80px;
        height: 100%;
        float: left;
        margin-left: 10px;
        font-size: 10px;
        color: #595959;
        text-align: left;
    }

    .legend-item-value:after {
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
        content: '';
    }
</style>
<script>
var data = [{
  year: 2013,
  type: '食品烟酒',
  value: 4127
}, {
  year: 2013,
  type: '衣着',
  value: 1027
}, {
  year: 2013,
  type: '居住',
  value: 2999
}, {
  year: 2013,
  type: '生活用品',
  value: 806
}, {
  year: 2013,
  type: '交通通行',
  value: 1627
}, {
  year: 2013,
  type: '文教娱',
  value: 1398
}, {
  year: 2013,
  type: '医疗保健',
  value: 912
}, {
  year: 2013,
  type: '其他',
  value: 325
}, {
  year: 2014,
  type: '食品烟酒',
  value: 4494
}, {
  year: 2014,
  type: '衣着',
  value: 1099
}, {
  year: 2014,
  type: '居住',
  value: 3201
}, {
  year: 2014,
  type: '生活用品',
  value: 890
}, {
  year: 2014,
  type: '交通通行',
  value: 1869
}, {
  year: 2014,
  type: '文教娱',
  value: 1536
}, {
  year: 2014,
  type: '医疗保健',
  value: 1045
}, {
  year: 2014,
  type: '其他',
  value: 358
}, {
  year: 2015,
  type: '食品烟酒',
  value: 4814
}, {
  year: 2015,
  type: '衣着',
  value: 1164
}, {
  year: 2015,
  type: '居住',
  value: 3419
}, {
  year: 2015,
  type: '生活用品',
  value: 951
}, {
  year: 2015,
  type: '交通通行',
  value: 2087
}, {
  year: 2015,
  type: '文教娱',
  value: 1723
}, {
  year: 2015,
  type: '医疗保健',
  value: 1165
}, {
  year: 2015,
  type: '其他',
  value: 389
}, {
  year: 2016,
  type: '食品烟酒',
  value: 5151
}, {
  year: 2016,
  type: '衣着',
  value: 1203
}, {
  year: 2016,
  type: '居住',
  value: 3746
}, {
  year: 2016,
  type: '生活用品',
  value: 1044
}, {
  year: 2016,
  type: '交通通行',
  value: 2338
}, {
  year: 2016,
  type: '文教娱',
  value: 1915
}, {
  year: 2016,
  type: '医疗保健',
  value: 1307
}, {
  year: 2016,
  type: '其他',
  value: 406
}];
var yearSum = getYearsum();
var yearPercent = getYearPercent(yearSum);
var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight,
  padding: [20, 210, 30, 50]
});
chart.source(data, {
  year: {
    type: 'timeCat',
    range: [0, 1]
  }
});
chart.axis('year', {
  label: {
    textStyle: {
      fill: '#aaaaaa'
    }
  }
});
chart.axis('value', {
  label: {
    textStyle: {
      fill: '#aaaaaa'
    },
    formatter: function formatter(text) {
      return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
    }
  }
});
chart.legend({
  useHtml: true,
  position: 'right',
  reactive: true,
  containerTpl: '<div class="g2-legend">2016 年支出排行<div class="g2-legend-list"></div></div>',
  itemTpl: function itemTpl(value, color, checked, index) {
    var markerDom = '<div class="legend-item-marker" style="background-color:' + color + '">' + (index + 1) + '</div>';
    var nameDom = '<div class="legend-item-name">' + value + '</div>';
    var percentDom = '<div class="legend-item-percent">' + yearPercent[value].percent.toFixed(2) + '</div>';
    var valueDom = '<div class="legend-item-value">' + yearPercent[value].value + '</div>';
    return '<div class="g2-legend-list-item">' + markerDom + nameDom + percentDom + valueDom + '</div>';
  }
});
chart.line().position('year*value').color('type', ['#ff4d4f', '#ff7a45', '#ffa940', '#facc14', '#bae637', '#73d13d', '#36cfc9', '#40a9ff']);
chart.render();

function getYearsum() {
  var sum = 0;
  for (var i = 0; i < data.length; i++) {
    var d = data[i];
    if (d.year === 2016) {
      sum += d.value;
    }
  }
  return sum;
}

function getYearPercent(sum) {
  var percentage = {};
  for (var i = 0; i < data.length; i++) {
    var d = data[i];
    if (d.year === 2016) {
      percentage[d.type] = {
        percent: d.value / sum,
        value: d.value
      };
    }
  }
  return percentage;
}
</script>
</body>
</html>
